<%--
  Created by IntelliJ IDEA.
  User: lanou
  Date: 18/1/22
  Time: 下午4:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>游戏中心</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

    <!-- Custom styles for this template -->
    <link href="jumbotron.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">用户信息</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <form class="navbar-form navbar-right" action="/ajax/login" method="post" id="form1">
                <c:if test="${null==uname}">
                    <div class="form-group">
                        <input type="text" placeholder="用户名" class="form-control" name="uname" id="name2">
                    </div>
                    <div class="form-group">
                        <input type="password" placeholder="用户密码" class="form-control" name="upwd" id="pwd2">
                    </div>
                    <button type="button" class="btn btn-success" id="login">登陆</button>
                    <%--<button type="button" class="btn btn-success" id="zhuce">注册</button>--%>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                            data-whatever="@mdo" id="zhuce">注册
                    </button>
                </c:if>

                <c:if test="${null!=uname}">

                    <button type='button' class='btn btn-success'>欢迎${uname}登录!!</button>
                    <a class="btn btn-default" href="/show" role="button">我2的物品 &raquo;</a>


                    <button type='button' class='btn btn-success' id="quit">退出</button>

                </c:if>


            </form>
        </div><!--/.navbar-collapse -->
    </div>
</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
    <div class="container">
        <h1>欢迎来到Chris!</h1>
        <p>我们致力于网络游戏的开发。维护网络环境是我们的责任和义务，您给我信任，我还您公平游戏！blablablabla~</p>
        <p>我们致力于网络游戏的开发。维护网络环境是我们的责任和义务，您给我信任，我还您公平游戏！blablablabla~</p>
        <p>我们致力于网络游戏的开发。维护网络环境是我们的责任和义务，您给我信任，我还您公平游戏！blablablabla~</p>
        <p>我们致力于网络游戏的开发。维护网络环境是我们的责任和义务，您给我信任，我还您公平游戏！blablablabla~</p>


        <c:if test="${null!=uname}">
            <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="个人信息"
                    data-content="${uintroduce}">我的信息
            </button>
        </c:if>

        <c:if test="${null==uname}">
            <p><a class="btn btn-primary btn-lg" href="#" role="button">未登录 &raquo;</a></p>

        </c:if>

    </div>
</div>

<div class="container">
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-md-4">
            <h2>英雄联盟！</h2>
            <p>《英雄联盟》(简称LOL)是由美国拳头游戏(Riot
                Games)开发、中国大陆地区腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色养成系统。《英雄联盟》还致力于推动全球电子竞技的发展，有了自己独有的电子竞技文化。 </p>
            <p><a class="btn btn-default" href="/ajax/lol?name=lol" role="button" >点击进入 &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>斩！赤红之瞳</h2>
            <p>《斩！赤红之瞳》是由タカヒロ原作、田代哲也作画的漫画。该漫画讲述了少年剑士塔兹米为了解救贫穷的村子而与两位同伴一起来到帝都打拼后遭遇的故事。于《月刊GANGAN
                JOKER》2010年4月号开始连载，全78话。</p>
            <p><a class="btn btn-default" href="/ajax/chi?name=chi" role="button" id="chi">点击进入 &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>弹弹堂</h2>
            <p>
                《弹弹堂手游》是由第七大道研发，腾讯游戏代理，在Android、IOS平台上运营的多人对战弹射手游，已于2017年4月27日开始不删档内测。玩家可以通过PVP模式进行对战，体验好有互动、竞技乐趣，也可以参加极具挑战的多人副本PVE模式等</p>
            <p><a class="btn btn-default" href="/ajax/dandan?name=dandan" role="button" id="dandan">点击进入 &raquo;</a></p>
        </div>
    </div>

    <hr>

    <footer>
        <p>&copy; 2016 Company, Inc.</p>
    </footer>
</div>
<!-- /container -->

<%--模态框--%>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">请填写信息 </h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">账号:</label>
                        <input type="text" class="form-control" id="recipient-name" name="zhanghao">
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">密码:</label>
                        <input type="text" class="form-control" name="mima">
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">自我介绍:</label>
                        <input type="text" class="form-control" name="jieshao">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="register">Register</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<script type="text/javascript">


    $(document).ready(function () {
        $('[data-toggle="popover"]').popover();
//        $(function () {
//            $('[data-toggle="popover"]').popover()
//        })
        $("#login").on("click", function () {
            //   console.log("123123");
            var uname = $("[name=uname]").val();
            var upwd = $("[name=upwd]").val();
            /**
             * ajax请求
             */
            $.ajax({
                type: "post",
                url: "/ajax/hello",
                data: {uname: uname, upwd: upwd},
                success: function (data) {
                    //  alert(data);
                    if (data == true) {
                        alert("成功");

                        window.location.href = "login";

//                        $("#login").hide();
//                        $("#zhuce").hide();
//                        $("#name2").hide();
//                        $("#pwd2").hide();
                        //    var name = request.getSession().getAttribute("uname");
                        //    $("form").append(name);
                        // $("form").append(${name});

                    } else {
                        alert("账号密码错误！！！！")
                    }

                },
                error: function (data) {
                    alert("错误了");
                }
            })
        })


        $("#register").on("click", function () {
            var zhanghao = $("[name=zhanghao]").val();
            var mima = $("[name=mima]").val();
            var jieshao = $("[name=jieshao]").val();

            $.ajax({
                type: "post",
                url: "/ajax/zhuce",
                data: {zhanghao: zhanghao, mima: mima, jieshao: jieshao},

                success: function (data) {
                    alert("注册成功");
                }

            })
        })

    })
    $("#quit").on("click", function () {

        $.ajax({

            type: "get",
            url: "/ajax/quit",
            success: function () {
                window.location.href = "/login";
            }


        })


    })

//    $("#lol").on("click", function () {
//        var name = "lol";
//        $.ajax({
//
//            type: "get",
//            url: "/ajax/lol",
//            data: {name: name},
//            success: function (data) {
//                window.location.href = data;
//            }
//
//
//        })
//
//
//    })
//
//    $("#dandan").on("click", function () {
//
//        $.ajax({
//
//            type: "get",
//            url: "/ajax/dandan",
//            success: function (data) {
//                window.location.href = data;
//            }
//
//
//        })
//
//
//    })
//
//    $("#chi").on("click", function () {
//
//        $.ajax({
//
//            type: "get",
//            url: "/ajax/chi",
//            success: function (data) {
//                window.location.href = data;
//            }
//
//
//        })
//
//
//    })


</script>


<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

</body>
</html>